<!DOCTYPE html>
<!-- include three.js -->
<script src='vendor/three.js/build/three.js'></script>
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>

<!-- include js-aruco -->
<script src='../vendor/js-aruco/svd.js'></script>
<script src='../vendor/js-aruco/posit1-patched.js'></script>
<script src='../vendor/js-aruco/cv.js'></script>
<script src='../vendor/js-aruco/aruco.js'></script>

<!-- include some extensions -->
<script src='../threex.webcamgrabbing.js'></script>
<script src='../threex.imagegrabbing.js'></script>
<script src='../threex.videograbbing.js'></script> 
<script src='../threex.jsarucomarker.js'></script>

<body style='margin: 0px; overflow: hidden;'>

<div id='info' style='position: absolute; top: 0px; width: 100%;font-family:arial; font-weight: bolder; padding-top: 5px; text-align:center;'>
	Augmented Reality with <a href="http://threejs.org" target="_blank">three.js</a>
	- works on desktop and mobile
	<br/>
	require <a href='https://get.webgl.org/'>WebGL</a> and <a href='http://caniuse.com/#feat=stream'>getUserMedia</a> Support
	-
	Put this <a target='blank' href='http://jeromeetienne.github.io/threex.webar/marker/image-marker-265.html'>marker</a>
	in front of the camera
	<br/>
	Source:
	<a class='webcam' href='javascript:void();'>webcam</a> -
	<a class='image'  href='javascript:void();'>image</a> -
	<a class='video'  href='javascript:void();'>video</a>
</div>

<div id='performanceEnabler' style='position: absolute; top: 0px; right: 0px; text-align: right;background-color:rgba(255,255,255,0.5);padding-left: 10px; padding-bottom: 10px;border-width: 1px;
  border-style: solid;'>
	<div style='text-align: center;'>OPTIONS</div>
	<hr/>
	<label id='detectMarkersEnabled' title='to enable/disable marker detection in video'>
		detectMarkers	<input type="checkbox"> 
	</label>
	<br/>
	<label id='markerToObject3DEnabled' title='to enable/disable marker to object3d conversion'>
		markerToObject3D <input type="checkbox"> 
	</label>
	<br/>
	<label id='webglRenderEnabled' title='to enable/disable webgl rendering'>
		webglRender	<input type="checkbox"> 
	</label>
	<br/>
	<label id='markerDebugEnabled' title='to enable/disable marker debug'>
		marker debug	<input type="checkbox"> 
	</label>
	<br/>
</div>

<script>
	//////////////////////////////////////////////////////////////////////////////////
	//		Test if the browser support WebGL and getUserMedia
	//////////////////////////////////////////////////////////////////////////////////
	;(function(){
		// TODO backport those 2 in Detector.js
		var hasGetUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) ? true : false
		var hasMediaStreamTrackSources = MediaStreamTrack.getSources ? true : false
		var hasWebGL = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch ( e ) { return false; } } )()
		
		if( hasWebGL === false ){
			alert('your browser doesn\'t support navigator.getUserMedia()')			
		}
		if( hasMediaStreamTrackSources === false ){
			alert('your browser doesn\'t support MediaStreamTrack.getSources()')			
		}
		if( hasGetUserMedia === false ){
			alert('your browser doesn\'t support navigator.getUserMedia()')		
		}
	})()
	
	//////////////////////////////////////////////////////////////////////////////////
	//		enabled/disable various parts
	//////////////////////////////////////////////////////////////////////////////////
	var detectMarkersEnabled	= true
	var markerToObject3DEnabled	= true
	var webglRenderEnabled		= true
	
	document.querySelector('#detectMarkersEnabled input').checked	= detectMarkersEnabled
	document.querySelector('#detectMarkersEnabled input').addEventListener('change', function(){
		detectMarkersEnabled = document.querySelector('#detectMarkersEnabled input').checked 
	})

	document.querySelector('#markerToObject3DEnabled input').checked= markerToObject3DEnabled
	document.querySelector('#markerToObject3DEnabled input').addEventListener('change', function(){
		markerToObject3DEnabled = document.querySelector('#markerToObject3DEnabled input').checked 
	})

	document.querySelector('#webglRenderEnabled input').checked	= webglRenderEnabled
	document.querySelector('#webglRenderEnabled input').addEventListener('change', function(){
		webglRenderEnabled = document.querySelector('#webglRenderEnabled input').checked
		// clear the webgl canvas - thus the last webgl rendering disapears
		renderer.clear()
	})

	document.querySelector('#markerDebugEnabled input').checked	= false
	document.querySelector('#markerDebugEnabled input').addEventListener('change', function(){
		jsArucoMarker.debugEnabled = document.querySelector('#markerDebugEnabled input').checked
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		init Stats for detectMarkers
	//////////////////////////////////////////////////////////////////////////////////
	var detectMarkersStats = new Stats();
	detectMarkersStats.setMode( 1 );
	document.body.appendChild( detectMarkersStats.domElement );
        detectMarkersStats.domElement.style.position = 'absolute'
	detectMarkersStats.domElement.style.bottom = '0px'
	detectMarkersStats.domElement.style.right = '0px'

	var renderStats = new Stats();
	renderStats.setMode( 0 );
	document.body.appendChild( renderStats.domElement );
        renderStats.domElement.style.position = 'absolute'
	renderStats.domElement.style.bottom = '0px'
	renderStats.domElement.style.left = '0px'

	//////////////////////////////////////////////////////////////////////////////////
	//		Handle ui button
	//////////////////////////////////////////////////////////////////////////////////
	document.querySelector('#info .webcam').addEventListener('click', function(event){
		location.hash	= '#webcam'
		location.reload()
	})

	document.querySelector('#info .image').addEventListener('click', function(event){
		location.hash	= '#image'
		location.reload()
	})

	document.querySelector('#info .video').addEventListener('click', function(event){
		location.hash	= '#video'
		location.reload()
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		Init
	//////////////////////////////////////////////////////////////////////////////////

	// init renderer
	var renderer	= new THREE.WebGLRenderer({
		antialias	: true,
		alpha		: true,
	});
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// array of functions for the rendering loop
	var onRenderFcts = [];

	// init scene and camera
	var scene = new THREE.Scene()
	var camera	= new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 1000);
	camera.position.z = 2;

	//////////////////////////////////////////////////////////////////////////////////
	//		create a markerObject3D
	//////////////////////////////////////////////////////////////////////////////////
	var markerObject3D = new THREE.Object3D()
	scene.add(markerObject3D)

	//////////////////////////////////////////////////////////////////////////////////
	//		add an object in the markerObject3D
	//////////////////////////////////////////////////////////////////////////////////

	// add some debug display
	;(function(){
		var geometry = new THREE.PlaneGeometry(1,1,10,10)
		var material = new THREE.MeshBasicMaterial( {
			wireframe : true
		})
		var mesh = new THREE.Mesh(geometry, material);
		markerObject3D.add( mesh );

		var mesh = new THREE.AxisHelper
		markerObject3D.add( mesh );
	})()

	// add a awesome logo to the scene
	;(function(){
		var material = new THREE.SpriteMaterial({
			map: THREE.ImageUtils.loadTexture( 'images/awesome.png' ),
		});
		var geometry = new THREE.BoxGeometry(1,1,1)
		var object3d = new THREE.Sprite(material );
		object3d.scale.set( 2, 2, 1 );
		markerObject3D.add(object3d)
	})()

	//////////////////////////////////////////////////////////////////////////////////
	//		render the whole thing on the page
	//////////////////////////////////////////////////////////////////////////////////

	// handle window resize
	window.addEventListener('resize', function(){
		renderer.setSize( window.innerWidth, window.innerHeight )
		camera.aspect	= window.innerWidth / window.innerHeight
		camera.updateProjectionMatrix()
	}, false)

	
	// render the scene
	onRenderFcts.push(function(){	
		renderStats.begin();
		if( webglRenderEnabled === true ){
			renderer.render( scene, camera );
		}
		renderStats.end();
	})

	// run the rendering loop
	var previousTime = performance.now()
	requestAnimationFrame(function animate(now){

		requestAnimationFrame( animate );

		onRenderFcts.forEach(function(onRenderFct){
			onRenderFct(now, now - previousTime)
		})

		previousTime	= now
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		Do the Augmented Reality part
	//////////////////////////////////////////////////////////////////////////////////


	// init the marker recognition
	var jsArucoMarker	= new THREEx.JsArucoMarker()

	// if no specific image source is specified, take the webcam by default
	if( location.hash === '' )	location.hash = '#webcam'

	// init the image source grabbing
	if( location.hash === '#video' ){
		var videoGrabbing = new THREEx.VideoGrabbing()
		jsArucoMarker.videoScaleDown = 2
	}else if( location.hash === '#webcam' ){
		var videoGrabbing = new THREEx.WebcamGrabbing()
		jsArucoMarker.videoScaleDown = 2
	}else if( location.hash === '#image' ){
		var videoGrabbing = new THREEx.ImageGrabbing()
		jsArucoMarker.videoScaleDown = 10
	}else console.assert(false)

	// attach the videoGrabbing.domElement to the body
        document.body.appendChild(videoGrabbing.domElement)

	//////////////////////////////////////////////////////////////////////////////////
	//		Process video source to find markers
	//////////////////////////////////////////////////////////////////////////////////
	// set the markerObject3D as visible
	markerObject3D.visible	= false
	// process the image source with the marker recognition
	onRenderFcts.push(function(){
		if( detectMarkersEnabled === false )	return
		
		var domElement	= videoGrabbing.domElement
		detectMarkersStats.begin();
		var markers	= jsArucoMarker.detectMarkers(domElement)
		detectMarkersStats.end();

		if( markerToObject3DEnabled === false )	return
		markerObject3D.visible = false

		// see if this.markerId has been found
		markers.forEach(function(marker){
			// if( marker.id !== 265 )	return

			jsArucoMarker.markerToObject3D(marker, markerObject3D)

			markerObject3D.visible = true
		})
	})
</script></body>
